{template '_header'}
<style type='text/css'>
    .moresearch {
        padding: 0px 10px;
    }

    .moresearch .col-sm-2 {
        padding: 0 5px
    }

    .popover {
        width: 150px;
        font-size: 12px;
        line-height: 21px;
        color: #0d0706;
    }

    .popover span {
        color: #b9b9b9;
    }

    .nickname {
        display: inline-block;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .tooltip-inner {
        border: none;
    }


    .tooltip {
        position: absolute;
        padding: 5px;
        width: 120;
        height: auto;
        font-family: simsun;
        font-size: 14px;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        border-width: 2px solid rgb(30, 30, 30);
        border-radius: 5px;
    }

    /* .tooltip:after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 20%;
        margin-left: -8px;
        width: 0;
        height: 0;
        border-bottom: 12px solid rgb(255, 255, 255);
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
    } */
</style>
<div class="page-header"> 
    当前位置：<span class="text-primary">关系图</span>
</div>
<div class="page-content">


</div>




{template '_footer'}
<script src="../addons/ewei_shopv2/plugin/relationship/static/js/d3.js?v={php echo time()}"></script>
<style>
    .node {
        cursor: pointer;
        font: 12px sans-serif;
    }

    .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
    }
</style>
<script>
    var width = 1100,
        height = 2000;
    var cluster = d3.layout.tree()
        .size([width, height - 200]);

    var diagonal = d3.svg.diagonal()
        .projection(function (d) {
            return [d.x, d.y];
        });
    var svg = d3.select(".page-content").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("transform", "translate(" + 10 + "," + 50 + ")");


    var tooltip = d3.select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0.0);

    //箭头
    var marker =
        svg.append("marker")
            .attr("id", "resolved")
            .attr("markerUnits", "strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
            .attr("markerUnits", "userSpaceOnUse")
            .attr("viewBox", "0 -5 10 10")//坐标系的区域
            .attr("refX", 10)//箭头坐标
            .attr("refY", -1)
            .attr("markerWidth", 12)//标识的大小
            .attr("markerHeight", 12)
            .attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
            .attr("stroke-width", 2)//箭头宽度
            .append("path")
            .attr("d", "M0,-5L10,0L0,5")//箭头的路径
            .attr('fill', '#000000');//箭头颜色

    var root = {php echo json_encode($list)};
    // var root = {
    //     "name": "中国",
    //     "number": "2000",
    //     "children":
    //         [
    //             {
    //                 "name": "浙江",
    //                 "number": "100",
    //                 "children":
    //                     [
    //                         {
    //                             "name": "杭州",
    //                             "default": 1,
    //                             "number": "100"
    //                         },
    //                         {
    //                             "name": "宁波",
    //                             "number": "200"
    //                         }
    //                     ]
    //             },
    //             {
    //                 "name": "广西",
    //                 "number": "500",
    //                 "children":
    //                     [
    //                         {
    //                             "name": "桂林",
    //                             "number": "100"
    //                         },
    //                         {
    //                             "name": "南宁",
    //                             "number": "200"
    //                         }
    //                     ]
    //             },
    //             {
    //                 "name": "黑龙江",
    //                 "number": "500",
    //                 "children":
    //                     [
    //                         {
    //                             "name": "哈尔滨",
    //                             "number": "100"
    //                         }
    //                     ]
    //             },
    //             {
    //                 "name": "新疆",
    //                 "number": "500",
    //                 "children":
    //                     [
    //                         {
    //                             "name": "乌鲁木齐",
    //                             "number": "100"
    //                         }
    //                     ]
    //             }]
    // }
    var i = 0;
    var nodes = cluster.nodes(root).reverse();
    nodes.forEach(function (d) { d.y = d.depth * 165; });

    var links = cluster.links(nodes);


    var linkEnter = svg.selectAll("path.link")
        .data(links);

    linkEnter.enter().append("path")//在指定元素之前插入一个元素
        .attr("class", "link")
        .attr("d", diagonal)
        .attr("stroke", "white")
        .attr("marker-end", "url(#resolved)")//根据箭头标记的id号标记箭头
        .style("fill", "white")
        .style("fill-opacity", 1)
        // 首先为每条节点连线添加标识id
        .attr("id", function (d, i) {
            return "mypath" + i;
        });

    //为连线添加文字
    // linkEnter.enter().append('text')
    //     .attr('x', 100)
    //     .attr('y', 80)
    //     .style('fill', 'green')
    //     .style('font-size', '15px')
    //     .style('font-weight', 'bold')
    //     .append('textPath')
    //     .attr({//引用路径
    //         'xlink:href': function (d, i) {
    //             return "#mypath" + i;
    //         }
    //     })
    //     .text(function (d, i) {
    //         return d.target.number
    //     });


    var node = svg.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function (d) {
            return "translate(" + (d.x + -25) + "," + (d.y) + ")";
        })
        // .on("mouseover", function (d) {
        //     d3.select(this).attr("transform", function (d) {
        //         return "translate(" + (d.x + 10) + "," + (d.y) + ")";
        //     })
        // }).on("mouseout", function (d) {
        //     d3.select(this).attr("transform", function (d) {
        //         return "translate(" + (d.x + -25) + "," + (d.y) + ")";
        //     })                
        // });

    var rect = node.append("image")
        .attr("width", 50)
        .attr("height", 50)
        .attr("x", 0)
        .attr("y", 0)
        .attr("style", "fill:#2990ca;")
        
        .attr("rx", 50)
        .attr("xlink:href", function (d) {
            return d.avatar ||"../addons/ewei_shopv2/static/images/noface.png"; // 修改节点头像
        })
        .attr("src", function(d, i){
            return  d.avatar||"../addons/ewei_shopv2/static/images/noface.png" ;
        });

     node.append("text")
        .attr("dx", function (d) {
            return 10;
        })
        .attr("dy", 70)
        .style("text-anchor", function (d) {
            return "middle";
        })
        .style("fill", "#000")
        .text(function (d) { return d.nickname; });
        
     node.append("text")
        .attr("dx", function (d) {
            return 10;
        })
        .attr("dy", 90)
        .style("text-anchor", function (d) {
            return "middle";
        })
        .style("fill", "#f00")
        .text(function (d) { return d.isagent==1? d.rank_name:''; });
        
    //写数字
    // node.append("text")
    //     .attr("dx", function (d) {
    //         return 70;
    //     })
    //     .attr("dy", 25)
    //     .style("text-anchor", function (d) {
    //         return "middle";
    //     })
    //     .style("fill", "#fff")
    //     .text(function (d) { return d.number; });
    
    rect.on("mouseover", function (d) {
        d3.select(this).attr('width',120)
        // var t = parseInt(threshold(d[2]).substring(1, 2));
        // if (t > 0) {
        tooltip
            .html(" 昵称:"+d.nickname+"  <br/>" + " 真实姓名： "+d.realname+" <br />" + " 手机:"+d.mobile+" <br />" + " <a href=\"{php echo webUrl('member/list/detail')}&id="+d.id+"\" style='color:white;text-decoration:underline' target='_blank' >会员详情</a> "+" <br />" + " <a href=\"{php echo webUrl('relationship/diagram')}"+(d.agentid>0?"&agentid="+d.agentid:'') +"  \" style='color:white;text-decoration:underline' target='_blank' >上级【"+d.amnickname+"】关系树</a> ")
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY + 25) + "px")
            .style("opacity", 1.0).on("mouseover", function (d) {
                tooltip.style("opacity", 1.0);
            }).on("mouseout", function (d) { 
                tooltip.style("opacity", 0.0);
            })
        // }
        })
        .on("mouseout", function (d) { 
            d3.select(this).attr('width',50)
            tooltip.style("opacity", 0.0);
        }).on('click',function(d){
            var url="{php echo webUrl('relationship/diagram')}&agentid="+d.id;
            window.location.href=url;
            console.log(url);
        });
</script>